<template>
  <div id="container" style="height: 400px">
    <!--<div class="highcharts-container"></div>-->
    <!--<Highcharts :options="chartOptions" :callback="myCallback"></Highcharts>-->
  </div>
</template>

<script>
  import Highcharts from 'highcharts/highstock';
  import HighchartsMore from 'highcharts/highcharts-more';
  import Highcharts3D from 'highcharts/highcharts-3d';
  HighchartsMore(Highcharts);
  Highcharts3D(Highcharts);

  export default {
    name: "highCharts",
    components: {
      // Highcharts
    },
    data() {
      return {

      }
    },
    methods: {
      init() {
        Highcharts.chart('container', {
          chart: {
            type: 'pie',
            options3d: {
              enabled: true,
              alpha: 60
            }
          },
          legend: {
            symbolRadius: 0// 使图例小图标由原型变成正方形
          },
          title: {
            floating:true,
            text: '测试',
            style: {
              fontSize: "45px",
              lineHeight: "45px",
            }
          },
          // subtitle: {
          //   text: 'Highcharts 中的3D环形图'
          // },
          plotOptions: {
            pie: {
              innerSize:200,// 饼图的内径大小
              depth: 45,
              // dataLabels: {
              //   softConnector: false,   // 是否使用曲线
              //   connectorColor: 'red', // 连接线颜色，默认是扇区颜色
              //   distance: 20, // 数据标签与扇区距离
              //   connectorPadding: 30,  // 数据标签与连接线的距离
              //   formatter: function () {
              //     // 通过函数判断是否显示数据标签，为了防止数据标签过于密集
              //     return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%'  : null;
              //   }
              // },
              showInLegend: true// 是否显示图例
            },
            series: {
              states: {
                inactive: {
                  opacity: 1
                }
              }
            }
          },
          series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
              name: 'Chrome',
              y: 61.41,
              // sliced: true,
              // selected: true
            }, {
              name: 'Internet Explorer',
              y: 11.84,
              // dataLabels: {
              //   softConnector: false,   // 是否使用曲线
              //   // connectorColor: 'red', // 连接线颜色，默认是扇区颜色
              //   distance: 20, // 数据标签与扇区距离
              //   connectorPadding: 30,  // 数据标签与连接线的距离
              //   formatter: function () {
              //     // 通过函数判断是否显示数据标签，为了防止数据标签过于密集
              //     return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%'  : null;
              //   }
              // }
            }, {
              name: 'Firefox',
              y: 10.85
            }, {
              name: 'Edge',
              y: 4.67
            }, {
              name: 'Safari',
              y: 4.18
            }, {
              name: 'Other',
              y: 7.05
            }]
          }]
        }, function(c) {
          // 图表初始化完毕后的会掉函数
          // 环形图圆心
          var centerY = c.series[0].center[1],
            titleHeight = parseInt(c.title.styles.fontSize);
          // 动态设置标题位置
          c.setTitle({
            y:centerY + titleHeight/2
          });
        })
      },
      myCallback() {
        console.log("this is callback function");
      }
    },
    mounted() {
      this.init()
    }
  }
</script>

<style scoped>

</style>
